<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>影视信息列表</h2>
<div>
    <form method="post" action="#" onsubmit="return checkLength()">
        影视分类：<select name="category" id="category">
        <option value="">全部</option>
        <option value="电视">电视</option>
        <option value="电影">电影</option>
    </select>
        影视语言：<select name="languageId" id="languageId">
        <option value="0">全部</option>
    </select>
        <input type="submit" value="查询">
        <input type="button" value="新  增" th:onclick="|add()|">
    </form>

</div>
<table id="table">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>主演</th>
        <th>分类</th>
        <th>语言</th>
        <th>集数</th>
        <th>操作</th>
    </tr>

</table>

</body>
<script th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}" src="js/jquery.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/selectAll",
            dataType: "json",
            success: function (data) {
                //获取model中roleId
                var brandId = [[${brandId}]];
                // alert("json："+data);
                for (var i in data) {
                    var op = "<option ";
                    if (data[i].brandId == brandId) {
                        op += " selected='selected' ";
                    }
                    op += " value='" + data[i].brandId + "'>" + data[i].brandName + "</option>";
                    $("#brandId").append(op);
                }
            },
            error: function (data) {
                alert("对不起，获取数据失败！");
            }
        });
    });

    function add() {
        location.href = "/veh/toAdd";
    }

    function bianji(id, status) {
        if (window.confirm("确认要编辑吗？")) {
            //状态的切换
            if (status == 0) {
                status = 1;
            } else if (status == 1) {
                status = 0;
            }
            $.getJSON("/veh/update?id=" + id + "&status=" + status, function (data) {
                if (data.reult == true) {
                    alert("修改成功");
                    location.reload();
                } else {
                    alert("修改失败");
                }
            })
        }
    }

    $("form").submit(function () {
        var category = $("#category").val();
        var languageId = $("#languageId").val();
        $.getJSON("list?category="+category+"&languageId="+languageId,function (data) {
            $.each(data.list,function (index,ele) {
                let tr=`<tr>
        <td>${ele.id}</td>
        <td>${ele.actors}</td>
        <td>${ele.category}</td>
        <td th:if="${ele.languageId==1}">国语</td>
        <td th:if="${ele.languageId==2}">粤语</td>
        <td th:if="${ele.languageId==3}">英语</td>
        <td>${ele.nums}</td>
        <td><a href='#' th:onclick='|bianji(${ele.id})|'>编辑</a>
        <a href='#' >删除</a></td>
    </tr>`
            })
        })
    })

</script>
</html>